<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta th:content="${session.csrf_token}" name="csrf-token"/>
    <!--360浏览器优先以webkit内核解析-->
    <title>锁定屏幕</title>
    <link th:href="@{favicon.ico}" rel="shortcut icon"/>
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <style>
        .lockscreen {
            background: #d2d6de;
            height: 100vh;
            overflow: hidden;
            position: relative;
        }
        .lockscreen-wrapper {
            max-width: 400px;
            margin: 10% auto;
            z-index: 800;
            position: relative;
        }
        .lockscreen .lockscreen-name {
            text-align: center;
            font-weight: 600;
            margin-top: 50px;
            margin-bottom: 30px;
        }
        .lockscreen-item {
            border-radius: 4px;
            padding: 0;
            background: #fff;
            position: relative;
            margin: 10px auto 30px auto;
            width: 290px
        }
        .lockscreen-image {
            border-radius: 50%;
            position: absolute;
            left: -10px;
            top: -25px;
            background: #fff;
            padding: 5px;
            z-index: 10
        }
        .lockscreen-image>img {
            border-radius: 50%;
            width: 70px;
            height: 70px
        }
        .lockscreen-credentials {
            margin-left: 70px
        }
        .lockscreen-credentials .form-control {
            border: 0
        }
        .lockscreen-credentials .btn {
            background-color: #fff;
            border: 0;
            padding: 0 10px
        }
        .lockscreen-footer {
            margin-top: 150px
        }
        .lockscreen-time {
            width: 100%;
            color: #fff;
            font-size: 60px;
            display: inline-block;
            text-align: center;
            font-family: 'Open Sans', sans-serif;
            font-weight: 300;
            text-shadow: 0 0 10px rgba(0,0,0,0.5);
        }
        .fruit-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            overflow: hidden;
        }
        .fruit-background img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.7;
        }
    </style>
</head>
<body class="lockscreen">
<!-- 水果杂货店背景动图 -->
<div class="fruit-background">
    <img src="https://media.giphy.com/media/3o6Zt6ML6BklcajjsA/giphy.gif" alt="水果杂货店背景">
</div>

<div class="lockscreen-wrapper">
    <div class="lockscreen-time"></div>
    <div class="lockscreen-name">[[ ${user.loginName} ]] / [[${#strings.defaultString(user.userName, '-')}]]</div>

    <div class="lockscreen-item">
        <div class="lockscreen-image">
            <img th:src="(${#strings.isEmpty(user.avatar)}) ? @{/img/profile.jpg} : @{${user.avatar}}" th:onerror="this.src='img/profile.jpg'" class="img-circle" alt="User Image">
        </div>
        <form class="lockscreen-credentials" method="post" action="#" onsubmit="return false;">
            <div class="input-group">
                <input type="password" name="password" autocomplete="off" class="form-control" placeholder="密码">
                <div class="input-group-btn">
                    <button type="button" class="btn" onclick="unlock()"><i class="fa fa-arrow-right text-muted"></i></button>
                </div>
            </div>
        </form>
    </div>

    <div class="help-block text-center" style="margin-top: 50px; color: #fff; text-shadow: 0 0 5px rgba(0,0,0,0.5);">系统锁屏,请输入密码登录!</div>
    <div class="text-center">
        <a th:href="@{logout}" style="color: #fff; text-shadow: 0 0 5px rgba(0,0,0,0.5);">退出重新登录</a>
    </div>
</div>

<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=4.8.1}"></script>

<script th:inline="javascript">
    var ctx = [[@{/}]];
    Date.prototype.format = function(fmt) {
        var o = {
            "M+" : this.getMonth()+1,                 //月份
            "d+" : this.getDate(),                    //日
            "h+" : this.getHours(),                   //小时
            "m+" : this.getMinutes(),                 //分
            "s+" : this.getSeconds(),                 //秒
            "q+" : Math.floor((this.getMonth()+3)/3), //季度
            "S"  : this.getMilliseconds()             //毫秒
        };

        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        }

        for (var k in o) {
            if (new RegExp("(" + k + ")").test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length));
            }
        }
        return fmt;
    }

    $(function() {
        $('.lockscreen-time').text((new Date()).format('hh:mm:ss'));
        setInterval(function() {
            $('.lockscreen-time').text((new Date()).format('hh:mm:ss'));
        }, 500);
    });

    $(document).keydown(function(event) {
        if (event.keyCode == 13) {
            unlock();
        }
    });

    function unlock() {
        var username = $("input[name='username']").val();
        var password = $("input[name='password']").val();
        if ($.common.isEmpty(password)) {
            $.modal.msg("请输入密码");
            return;
        }

        var index = "";
        var config = {
            url: ctx + "unlockscreen",
            type: "post",
            dataType: "json",
            data: { password: password },
            beforeSend: function(xhr) {
                var csrftoken = $('meta[name=csrf-token]').attr('content');
                xhr.setRequestHeader("X-CSRF-Token", csrftoken);
                index = layer.load(2, {shade: false});
            },
            success: function(result) {
                if (result.code == web_status.SUCCESS) {
                    location.href = ctx + 'index';
                } else {
                    $.modal.msg(result.msg);
                    $("input[name='password']").val("");
                }
                layer.close(index);
            }
        };
        $.ajax(config);
    };
</script>
</body>
</html>